<template>
  <div class="my-container">
    <div class="row">
      <q-space/>
      <q-btn
        flat
        dense
        icon="add_circle"
        label="增加"
        color="primary"
        @click="addNewDataItem"
      />
      <q-btn
        flat
        dense
        icon="cancel"
        label="删除"
        color="primary"
        @click="removeDataItem"
      />
    </div>
    <div>
      <table class="my-transition-table">
        <tr>
          <td class="my-label">数据点</td>
          <td class="my-operator">比较符</td>
          <td class="my-value">设定值</td>
        </tr>
        <template v-for="(node, index) in paramList" :key="index">
          <tr>
            <td class="my-label">
              <q-btn dense outline label="选择" color="warning"/>
            </td>
            <td class="my-operator">
              <q-select
                dense
                outlined
                options-dense
                :options="operatorList"
                v-model="myOperator[index]"
                option-value="label"
                emit-value
                options-selected-class="teal"
                @update:model-value="updateOperator(index)"
              />
            </td>
            <td class="my-value">
              <q-input
                dense
                outlined
                type="number"
                v-model.lazy.number="node.vData"
              />
            </td>
          </tr>
        </template>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted, watch, toRefs, PropType } from 'vue';
import { cataItem } from 'src/hook/common/useCatalogType';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';


export interface CTransitionItem {
  varId: number,
  operatorId: number,
  vData: number
}

export default defineComponent({
  name: 'TransitionItem',
  components: {

  },

  props: {
    operatorArr: {
      type: Array as PropType<cataItem[]>,
      default: () => {
        return [];
      }
    },

    nodeList: {
      type: Array as PropType<CTransitionItem[]>,
      default: () => {
        return [];
      }
    }
  },
  emits: ['update:node-value'],
  setup (props, context) {
    //解构
    const {
      operatorArr,
      nodeList
    } = toRefs(props);

    const {
      findCatalogLabel,
      findCatalogId
    } = useCatalogTool()

    //响应数据
    let operatorList = ref<string[]>([]);
    let paramList = ref<CTransitionItem[]>([]);
    let myOperator = ref<string[]>([]);

    //更新操作符选项
    const updateOperator = (index: number) => {
      paramList.value[index].operatorId = findCatalogId(operatorArr.value, myOperator.value[index]);
    }

    //增加节点
    const addNewDataItem = () => {
      paramList.value.push({
        varId: 0,
        operatorId: 0,
        vData: 0
      })
    };

    //删除节点
    const removeDataItem = () => {
      paramList.value.pop();
    }

    //初始化
    const init = () => {
      operatorList.value.length = 0;
      operatorArr.value.forEach((el) => {
        myOperator.value.push(el.label);
      });

      paramList.value.length = 0;
      myOperator.value.length = 0;
      nodeList.value.forEach((item) => {
        paramList.value.push(item);
        let msg = findCatalogLabel(operatorArr.value, item.operatorId);
        myOperator.value.push(msg);
      })
    }

    //监控变化
    watch(() => paramList, () => {
      context.emit('update:node-value', paramList.value);
    }, { deep: true });

    //挂载组件
    onMounted(() => {
      init();
    });

    //卸载组件
    onUnmounted(() => {

    })

    return {
      operatorList,
      paramList,
      myOperator,
      findCatalogLabel,
      updateOperator,
      addNewDataItem,
      removeDataItem
    };
  }
});

</script>

<style lang="scss" scoped>
.my-container {
  padding: 10px;
  table, td {
    border: 0px solid #bbb6b6;
    border-collapse: collapse;
  }

  .my-transition-table {
    .my-label {
      padding: 5px;
      text-align: center;
      width: 33%;
      height: 30px;
    }

    .my-operator {
      padding: 5px;
      text-align: center;
      width: 33%;
    }

    .my-value {
      padding: 5px;
      text-align: center;
    }
  }
}

</style>
